| 【JS基础入门】JavaScript原生Ajax请求与响应处理方式及JSON数据格式、FormData方法的使用详解 | 您所在的位置：网站首页 › js 原生ajax请求 › 【JS基础入门】JavaScript原生Ajax请求与响应处理方式及JSON数据格式、FormData方法的使用详解 |
【JS基础入门】JavaScript原生Ajax请求与响应处理方式及JSON数据格式、FormData方法的使用详解
|
【JS基础入门】JavaScript原生Ajax请求与响应处理方式及JSON数据格式、FormData方法的使用详解2021年04月09日 17:48:21阅读数：2391博客 / 一纸荒凉* Armani/ JavaScriptJSON数据格式
JSON 是什么?在 JS 语言中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型
JSON: JavaScript Object Notation(JS 对象表示法)JSON 独立于任何编程语言, 几乎所有编程语言都提供了访问 JSON 数据的 API 接口JSON 是一种语法,用来序列化其它语言创建的数据类型JSON 仅支持 6 种数据类型:对象,数组,数值,字符串,布尔值,nullJSON 只是借用了 JS 中的一些数据表示语法,与 JS 并无关系
JSON 数据类型
序号
类型
描述
1
简单值
数值,字符串,布尔,null
1
复合值
对象,数组
JS 解析 JSON 的 API
序号
方法
描述
1
JSON.stringify()
将 JS 对象,序列化为 JSON 字符串
2
JSON.parse()
将 JSON 字符串,解析为 JS 对象
要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：要实现从 JSON 转换为对象，使用 JSON.parse() 方法： JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔，然后紧接着值 data.json { "name":"zhansan", "age":12, "lover":["coding","swimming","singing"], "friend":{ "high":"180cm", "weight":"80kg", "lover":["swimming","singing","dancing"], "friend":{} }} JSON方法JavaScript中JSON对象与JSON字符串相互转换 var obj = new Object();obj.Name = "八戒"obj.Age = 500;//通过字面量的形式来定义对象var obj1 = { "Name": "八戒", "Age": "500" };var arr = [{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }];//JSON格式：将json的字面量表示形式，当做字符串存放，则为json格式字符串var str = '{ "Name": "八戒", "Age": "500" }';var jsonstrarr = '[{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }];';//将json字符串转换成js对象（数组）var resobj = JSON.parse(str);alert(resobj.Name); JS对象转换成为JSONJSON.stringify() var data = { name:"zhansan", age:12, lover:["coding","swimming","singing"], friend:{ high:"180cm", weight:"80kg", lover:["swimming","singing","dancing"], friend:{} }};var arr = [ {id: 1,name: "admin",age: 18}, {id: 2,name: "php",age: 26}, {id: 3,name: "js",age: 15}, {id: 3,name: "ajax",age: 3},];var json_data = JSON.stringify(data);console.log(json_data);console.log(JSON.stringify(arr));JSON.stringify()第二个参数是个可选参数，被称为replacer。这个参数可以是数组或者函数。它提供了一个过滤机制制定了应该或者不应该包含哪些属性 const obj = { a: 0, b: 1, c: [0, 1, 2]}JSON.stringify(obj,['a', 'c']) // "{"a":0,"c":[0,1,2]}"JSON.stringify(obj,(key,value)=>{ if(key !== 'b'){ return value }})// "{"a":0,"c":[1,2,3]}"第三个可选的参数也可以传递给JSON.stringify()，被称为space，被用作缩进，是为了使得输出有格式更加漂亮。 const a = { b: 42, c: "42", d: [1,2,3]};JSON.stringify( a, null, 3 );// "{// "b": 42,// "c": "42",// "d": [// 1,// 2,// 3// ]// }"JSON.stringify( a, null, "-----" );// "{// -----"b": 42,// -----"c": "42",// -----"d": [// ----------1,// ----------2,// ----------3// -----]// }"
JSON.parse() var resobj = JSON.parse(str); FormData方法将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。 一、创建formData对象1、创建一个空对象： //通过FormData构造函数创建一个空对象var formdata=new FormData();//可以通过append()方法来追加数据formdata.append("name","laotie");//通过get方法对值进行读取console.log(formdata.get("name"));//laotie//通过set方法对值进行设置formdata.set("name","laoliu");console.log(formdata.get("name"));//laoliu2、通过表单对formData进行初始化 广告名称： 广告类别： 轮播图 轮播图底部广告 热门回收广告 优品精选广告 通过表单元素作为参数，实现对formData的初始化： //获得表单按钮元素var btn=document.querySelector("#btn");//为按钮添加点击事件btn.onclick=function(){ //根据ID获得页面当中的form表单元素 var form=document.querySelector("#advForm"); //将获得的表单元素作为参数，对formData进行初始化 var formdata=new FormData(form); //通过get方法获得name为advName元素的value值 console.log(formdata.get("advName"));//xixi //通过get方法获得name为advType元素的value值 console.log(formdata.get("advType"));//1 } 二、formData操作方法1、通过get(key)与getAll(key)来获取相对应的值 // 获取key为age的第一个值formdata.get("age"); // 获取key为age的所有值，返回值为数组类型formdata.getAll("age");2、通过append(key,value)在数据末尾追加数据 //通过FormData构造函数创建一个空对象var formdata=new FormData();//通过append()方法在末尾追加key为name值为laoliu的数据formdata.append("name","laoliu");//通过append()方法在末尾追加key为name值为laoli的数据formdata.append("name","laoli");//通过append()方法在末尾追加key为name值为laotie的数据formdata.append("name","laotie");//通过get方法读取key为name的第一个值console.log(formdata.get("name"));//laoliu//通过getAll方法读取key为name的所有值console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"]3、通过set(key, value)来设置修改数据 key的值不存在，会添加一条数据 //通过FormData构造函数创建一个空对象var formdata=new FormData();//如果key的值不存在会为数据添加一个key为name值为laoliu的数据formdata.set("name","laoli");//通过get方法读取key为name的第一个值console.log(formdata.get("name"));//laolikey的值存在，会修改对应的value值 //通过FormData构造函数创建一个空对象var formdata=new FormData();//通过append()方法在末尾追加key为name值为laoliu的数据formdata.append("name","laoliu");//通过append()方法在末尾追加key为name值为laoliu2的数据formdata.append("name","laoliu2");//通过get方法读取key为name的第一个值console.log(formdata.get("name"));//laoliu//通过getAll方法读取key为name的所有值console.log(formdata.getAll("name"));//["laoliu", "laoliu2"]//将存在的key为name的值修改为laoliformdata.set("name","laoli");//通过get方法读取key为name的第一个值console.log(formdata.get("name"));//laoli//通过getAll方法读取key为name的所有值console.log(formdata.getAll("name"));//["laoli"]4、通过has(key)来判断是否存在对应的key值 //通过FormData构造函数创建一个空对象var formdata=new FormData();//通过append()方法在末尾追加key为name值为laoliu的数据formdata.append("name","laoliu");//判断是否包含key为name的数据console.log(formdata.has("name"));//true//判断是否包含key为age的数据console.log(formdata.has("age"));//false5、通过delete(key)可以删除数据 //通过FormData构造函数创建一个空对象var formdata=new FormData();//通过append()方法在末尾追加key为name值为laoliu的数据formdata.append("name","laoliu");console.log(formdata.get("name"));//laoliu//删除key为name的值formdata.delete("name");console.log(formdata.get("name"));//null 三、通过XMLHttpRequest发送数据创建表单： 广告名称： 广告类别： 轮播图 轮播图底部广告 热门回收广告 优品精选广告 广告图片： 广告地址： 广告排序： 发送数据： var btn=document.querySelector("#btn");btn.onclick=function(){ var formdata=new FormData(document.getElementById("advForm")); var xhr=new XMLHttpRequest(); xhr.open("post","http://127.0.0.1/adv"); xhr.send(formdata); xhr.onload=function(){ if(xhr.status==200){ //... } }} AJax请求一、Ajax定义1、什么是AjaxAjax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来 。 3、ajax的工作原理客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示： 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: 创建XMLHttpRequest对象,即创建一个异步调用对象.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.设置响应HTTP请求状态变化的函数.发送HTTP请求.获取异步调用返回的数据.使用JavaScript和DOM实现局部刷新.1、创建XMLHttpRequest对象const xhr = new XMLHttpRequest(); 2、创建HTTP请求 创建了XMLHttpRequest对象之后，必须为XMLHttpRequest对象创建HTTP请求，用于说明XMLHttpRequest对象要从哪里获取数据。通常可以是网站中的数据,也可以是本地中其他文件中的数据。 创建HTTP请求可以使用XMLHttpRequest对象的open()方法,其语法代码如下所示:xhr.open(method,URL,flag,name,password); 代码中的参数解释如下所示: method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法，常用的方法为get和post。URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。flag：该参数为可选，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步，默认为true。name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。password：该参数为可选，用于输入密码。若服务器需要验证，则必须使用该参数。xhr.open("get","./ajax.htm",true); 3、处理 xhr 响应: xhr.onload = (...) => {...} 4、发送 xhr 请求: xhr.send(...) xhr 对象常用属性 序号 方法 描述 1 responseType 设置响应类型 2 response 响应正文 xhr 对象常用方法 序号 方法 描述 1 open(type,url) 配置请求参数 2 send(data/null) 发送请求 xhr 对象常用事件 序号 事件 描述 1 load() 请求成功 2 error() 请求失败http请求类型：GET :向指定资源请求数据，一般用来获取，查询资源信息POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件） get / post 区别如下几点： get 是 url 传参,post 是request body请求体传参get 回退无影响, post 回退会重复提交get 生成的 url 可做书签,post 不可以get 只能对 url 进行编码, post 支持多种编码get 请求参数会保留在历史记录中, post 参数不保留get 参数长度受限,post 无限制get 只接受 ascii 码字符,post 无限制get,post 底层实现是一致的,都是基于 http 协议get 也可以带上 request body, post 也可以带上 url 参数get 产生一个 tcp 数据包,post 产生二个 tcp 数据包get 产生一个请求, post 产生二个请求get 请求,浏览器将 header,data 一起发出,服务器响应 200 成功post 请求,浏览器先发出 header,得到响应 100 continue,再发出 data,得到响应 200并非所有浏览器的 post 都产生二次 http 请求,firefox 就只产生一次 get请求参数 提示信息 var btn = document.getElementById('btn');btn.onclick = function(){ var uname = document.getElementById('username').value; var pw = document.getElementById('password').value; // 1、创建XMLHttpRequest对象 let xhr = new XMLHttpRequest(); /* 参数一：请求方式（get获取数据；post提交数据） 参数二：请求地址 参数三：同步或者异步标志位，默认是true表示异步，false表示同步 如果是get请求那么请求参数必须在url中传递 encodeURI()用来对中文参数进行编码，防止乱码 */ // 2、准备发送 var param = 'username='+uname+'&password='+pw; xhr.open('get','./getDemo.php?'+encodeURI(param),true); // 3、执行发送动作 xhr.send(null); // get请求这里需要添加null参数 // 4、指定回调函数 xhr.onreadystatechange = function(){ /* readyState: 2 浏览器已经收到了服务器响应的数据 3 正在解析数据 4 数据已经解析完成 */ if(xhr.readyState == 4){ /* http的常见状态码 200 响应成功 404 没有找到请求资源 500 服务器端错误*/ if(xhr.status == 200){ let data = xhr.responseText; let info = document.querySelector("#info"); if(data == '1'){ info.innerText = "登录成功"; }else{ info.innerText = '用户名或密码错误'; } } } }} $uname = $_GET['username']; $pw = $_GET['password']; if($uname == 'admin' && $pw == '123'){ echo "1"; }else{ echo $uname; }
用户登录 邮箱: 密码: 提交 const form = document.querySelector(".login form"); const btn = document.querySelector(".login button"); const tips = document.querySelector(".tips"); // FormData: 表单数据的序列化 let data = new FormData(); data.append("email", "[email protected]"); data.append("password", "123456"); console.log(data.get("email"), data.get("password")); console.log(data); btn.onclick = (ev) => { // 默认的提交行为 ev.preventDefault(); // 1. 创建 xhr 对象: const xhr = new XMLHttpRequest(); // 2. 配置 xhr 参数: xhr.open("post", "test2.php"); // xhr.responseType = "text"; // 3. 处理 xhr 响应: xhr.onload = () => { tips.textContent = xhr.response; }; xhr.onerror = () => console.log("Error"); // 4. 发送 xhr 请求: xhr.send(new FormData(form)); }; |
【本文地址】
公司简介
联系我们